<template>
  <div>child</div>
  <div>{{name}}</div>

</template>

<script>

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'

export default {
  name: 'child',

  setup (props, context) {

    let name = ref(props.name)

    onBeforeMount(() => {
      console.log('c onBeforeMount')
    })

    onMounted(() => {
      console.log('c onMounted')
    })

    onBeforeUpdate(() => {
      console.log('c onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('c onUpdated')
    })

    return {
      name
    }
  }
}
</script>

<style>

</style>
